<template>
  <div>
    <h3>文件上传校验的场景</h3>
    <ul>
      <li>type: 指定为 array</li>
      <li>如果需要对文件上传的值， 比如校验文件个数等，需要写自定义的 validator</li>
      <li>如果是接口数据回显动作， 请处理 this.$refs['form'].clearValidate()</li>
      <li>:success上传完成以后的回调中，手动维护下 红色提示的状态</li>
    </ul>
    <el-form
      ref="form"
      inline
      :model="formModel"
      :rules="rules"
      label-width="120px"
    >
      <el-col>
        <el-form-item label="图片上传场景" prop="file">
          <el-upload
            action="/api/saas-mpf-product/admin/cloudSdk/upload"
            :on-success="(...args) => onHandleMultiFieldsUploade(args, 'file')"
            :file-list="formModel.file"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="身份证照片" prop="idcard">
          <el-upload
            action="/api/saas-mpf-product/admin/cloudSdk/upload"
            :on-success="
              (...args) => onHandleMultiFieldsUploade(args, 'idcard')
            "
            :file-list="formModel.idcard"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>

      <div>
        <el-button type="primary" @click="submit">提交</el-button>
        <span>表单校验 结果---》 {{ isValidate }}</span>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'check-file',
  data () {
    return {
      rules: {
        file: [
          { required: true, message: '请上传图片', type: 'array', trigger: ["blur", "change"] }
        ],
        idcard: [
          { required: true, message: '请上传图片', type: 'array', trigger: ["blur", "change"] }
        ]
      },
      formModel: {
        file: [],
        idcard: []
      },
      isValidate: false
    }
  },
  mounted () {
    // 模拟接口数据回显动作， 一般是清除一下 表单的红色提示
    // this.getDetail()
  },
  methods: {
    getDetail () {
      setTimeout(() => {
        this.formModel = {
          age: null,
          file: [],
          idcard: []
        }

        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      }, 1000);
    },
    /**
     * 图片上传成功后的回调
     */
    onHandleImgUploader (res, file) {
      // 无论这里是 push 还是下面重新赋一个新的数组对象， el-form 表单校验没有监听到字段的变化， 红色message没有消失
      // this.formModel.file.push(
      // {
      //   url: res.data,
      //   name: file.name,
      //   uid: file.uid
      // }
      // )

      this.formModel.file = [
        {
          url: res.data,
          name: file.name,
          uid: file.uid
        }
      ]

      this.$nextTick(() => {
        this.$refs['form'].clearValidate('file')
      })
    },

    onHandleMultiFieldsUploade (args, key) {
      /**
       * 此时 args 会是如下结构
       * [
       *    response,  后台接口返回的
       *    file,      原始的文件对象
       *    fileList   el-uploader 组件内部帮我收集的文件集合 [file, file, ...]
       * ]
       */
      this.formModel[key] = [
        {
          url: args[0].data,
          name: args[1].name,
          uid: args[1].uid
        }
      ]

      this.$nextTick(() => {
        this.$refs['form'].clearValidate(key)
      })
    },
    async submit () {
      try {
        const res = await this.$refs['form'].validate()

        this.isValidate = res
      } catch (e) {
        // 校验不通过
        console.log('e', e)
      }
    }
  }
}
</script>
